<template>
	<view class="newOrder">
		<view class="form">
			<view class="form_item">
				<view class="input">
					<input v-model="proId" type="text" placeholder="请输入货号" />
					<button style="margin-left: 10rpx;" @tap="edit">修改</button>
					<button style="margin-left: 10rpx;background-color: rgb(255 195 0 / 82%);" @tap="del">删除</button>
				</view>
			</view>

			<view class="form_item1">
				<view class="text"> <text>*</text>数量: </view>
				<view class="input">
					<input ref="number" :focus="focus" v-model="orderNum" @blur="onblur" type="digit"
						placeholder="请输入数量" />
				</view>
			</view>
			<view class="form_item1">
				<view class="text"> <text>*</text>单价: </view>
				<view class="input">
					<input ref="input" v-model="price" type="digit" placeholder="请输入单价" />
				</view>
			</view>
			<view class="form_item1">
				<view class="text" style="text-indent: 1em;"> 金额:</view>
				<view class="input">
					<input disabled="true" v-model="realPrice" type="digit" placeholder="请输入金额" />
				</view>
			</view>
			<view class="form_item1 last">
				<view class="text"> 备注: </view>
				<view class="input">
					<input v-model="remark" type="text" placeholder="请输入备注" />
				</view>
			</view>

			<!-- <view class="footer_btn">
				<button @tap="add">立即添加</button>
			</view> -->
		</view>
		<Prop @close="close" ref="child" @saveUser="saveUser" />
	</view>
</template>

<script>
	import {
		cal
	} from '@/utils/cal.js';
	import Prop from "../../components/prop.vue";
	export default {
		data() {
			return {
				// 货号
				proId: "",
				// 数量
				orderNum: "",
				// 单价
				price: "",
				// 金额
				// realPrice: "",
				// 备注
				remark: "",
				proType: "",
				cid: "",
				focus: false,
				index: -1,
				proTypeName: '',
				proSku: ""
			};
		},
		components: {
			Prop,
		},
		computed: {
			realPrice: {
				get() {
					return cal.chu(cal.cheng(cal.cheng(this.orderNum, 100), cal.cheng(this.price, 100)), 10000)
						.toNumber()
				},
				set() {
					return cal.chu(cal.cheng(cal.cheng(this.orderNum, 100), cal.cheng(this.price, 100)), 10000)
						.toNumber()
				}
			}
		},
		methods: {
			// 提交
			// add() {
			// 	if (
			// 		this.proId == "" ||
			// 		this.orderNum == "" ||
			// 		this.price == "" ||
			// 		this.menoy == ""
			// 	) {
			// 		uni.showToast({
			// 			title: "请输入信息",
			// 			icon: "none",
			// 		});
			// 	} else {
			// 		if(this.index!==-1){
			// 			this.$store.state[this.proTypeName][this.index].proId = this.proId
			// 			this.$store.state[this.proTypeName][this.index].orderNum = this.orderNum
			// 			this.$store.state[this.proTypeName][this.index].price = this.price
			// 			this.$store.state[this.proTypeName][this.index].realPrice = this.realPrice
			// 			this.$store.state[this.proTypeName][this.index].remark = this.remark
			// 			this.$store.state[this.proTypeName][this.index].proType = this.proType
			// 			this.$store.state[this.proTypeName][this.index].proSku = this.proSku
			// 		}else{
			// 			this.$store.commit(
			// 				`${this.proType == "0" ? "addProduct" : "returnProduct"}`, {
			// 					// 货号
			// 					proId: this.proId,
			// 					// 数量
			// 					orderNum: +this.orderNum,
			// 					// 单价
			// 					realPrice: this.price,
			// 					// 金额
			// 					// realPrice: +this.realPrice,
			// 					// 备注
			// 					remark: this.remark,
			// 					// 类型
			// 					proType: this.proType,
			// 					// 编辑
			// 					disabled: true,

			// 					proSku:this.proSku,


			// 				}
			// 			);
			// 		}

			// 		uni.showToast({
			// 			title: "添加成功",
			// 			icon: "none",
			// 		});
			// 		uni.navigateBack({
			// 			delta: 1,
			// 		});
			// 	}
			// },
			// // 打开客户筛选
			// open() {
			// 	this.$refs.child.open();
			// 	// console.log(this.$refs.input.focus())
			// 	// this.focus = true
			// 	// console.log(this.focus)
			// },
			edit() {
				this.$store.commit(
					`${this.proType == "0" ? "editItem1" : "editItem2"}`, {
						index: this.index,
						item: {
							// 货号
							proId: this.proId,
							// 数量
							orderNum: +this.orderNum,
							// 单价
							realPrice: this.price,
							// 金额
							// realPrice: +this.realPrice,
							// 备注
							remark: this.remark,
							// 类型
							proType: this.proType,
							// 编辑
							disabled: true,

							proSku: this.proSku,
						}
					}
				);
				uni.navigateBack({
					delta: 1
				})
			},
			del() {
				let that = this
				uni.showModal({
					content: "确定要删除吗？",
					success(res) {
						// console.log(res)
						if (res.confirm) {
							that.$store.commit(
								`${that.proType == "0" ? "delItem1" : "delItem2"}`, {
									index: that.index,
								})

							uni.navigateBack({
								delta: 1
							})
						}
					}
				})

			},
			onblur() {
				this.focus = false
			},
			saveUser(data) {
				this.proId = data.proId;
				this.$api
					.qryProductInfoApi({
						cid: this.cid,
						proId: this.proId
					})
					.then((res) => {
						if (res.code == 200) {
							this.orderNum = res.result.list[0].proNum;
							this.price = res.result.list[0].proPrice;
							this.remark = res.result.list[0].remark;
							this.proSku = res.result.list[0].proSku;
							this.realPrice = this.orderNum * this.price;
							console.log(this.price)
						}
					});
				this.$refs.child.close();
			},
			close() {
				this.focus = false
				this.$nextTick(() => {
					this.focus = true
				})
			},
		},

		created() {
			if (this.index === -1) {
				this.$nextTick(() => {
					this.open();

				})
			}

		},
		onLoad(option) {
			this.proType = option.proType;
			if (this.proType == 0) {
				this.proTypeName = "ShipmentList"
			}
			if (this.proType == 1) {
				this.proTypeName = "returnList"
			}
			if (option.index) {
				this.index = option.index
				let data = this.$store.state[this.proTypeName][option.index]
				this.remark = data.remark
				this.orderNum = data.orderNum
				this.price = data.realPrice
				this.proId = data.proId
				this.proSku = data.proSku
			}
			this.cid = option.cid;
		},
		onShow() {

		}

	};
</script>


<style lang="scss" scoped>
	page {
		background-color: #fff;
		height: 100vh;
	}

	.newOrder {
		background-color: #fff;
		height: 100vh;

		.form {
			padding: 38rpx 68rpx 32rpx 68rpx;
			background-color: #fff;
			// margin-top: 38rpx;

			.form_item {
				color: #bdbdbd;
				margin-bottom: 36rpx;

				.text {
					font-size: 0.875rem;
					margin-bottom: 22rpx;

					text {
						margin-left: 34rpx;
						color: #fe3430;
					}
				}

				.input {
					display: flex;
					align-items: center;

					input {
						color: #000;
						height: 94rpx;
						width: 434rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-indent: 1em;
					}

					button {
						color: #fff;
						width: 145rpx;
						height: 75rpx;
						line-height: 75rpx;
						background: #fe3430;
						border-radius: 38rpx;
					}
				}
			}

			.form_item1 {
				color: #bdbdbd;
				margin-bottom: 36rpx;

				.text {
					font-size: 0.875rem;
					margin-bottom: 22rpx;

					text {
						margin-left: 34rpx;
						color: #fe3430;
					}
				}

				.input {
					display: flex;
					align-items: center;

					input {
						text-indent: 1em;
						height: 94rpx;
						width: 100%;
						background: #f2f2f2;
						border-radius: 47rpx;
						text-indent: 1em;
						color: #000;
					}
				}
			}

			.btn {
				display: flex;

				button {
					height: 58rpx;
					line-height: 58rpx;
					background: #fe3430;
					border-radius: 49rpx;
					color: #fff;
					margin-left: 0;
					margin-right: 10rpx;
				}
			}
		}

		.footer_btn {
			margin-top: 74rpx;
			display: flex;
			padding-bottom: 74rpx;

			button {
				background: url("/static/images/user/button.png");
				background-size: 280rpx 124rpx;
				width: 280rpx;
				height: 124rpx;
				line-height: 96rpx;
				color: #ffffff;
			}
		}

		.last {
			text-indent: 1em;
		}
	}
</style>
